{% extends 'base.html' %}
{% block title %}
<title>Winform主题商城</title>
<link href="/public/css/home.css" rel="stylesheet"/>
<link rel="stylesheet" href="/public/js/slick/slick.css"/>
<link href="/public/css/search-goods.css" rel="stylesheet"/>
<script src="/public/js/slick/slick.min.js"></script>
{% endblock %}
{% block body %}
    <div class="header-wrap">
        <div class="header wrapper">
            <a href="" class="logo">
                <img src="/public/img/logo3.png" alt="" />
            </a>
            <div class="header-schbox">
                <div class="inner clearfix">
                <form action="" method="">
                    <div class="search-switch">
                        <i class="arrow"></i>
                        <div class="item">主题</div>
                    </div>
                    <input class="search-txt" placeholder="搜流行主题">
                    <button class="search-btn"></button>
                </form>
                </div>
                <div class="hot-words">
                    <!--<a href="">win8</a>-->
                </div>
            </div>
            <!--<div class="contact">
                <div class="item">
                    <span class="ico iconfont">&#xe61b;</span>
                    <span class="tel">400-000-0000</span>
                </div>
                <div class="item">
                     <span class="ico iconfont">&#xe61d;</span><a class="kefu">在线客服</a>
                </div>
            </div>-->
        </div>
    </div>
    <div class="nav-box">
        <div class="nav wrapper">
            <div class="slogan"></div>
            <!--<ul class="nav-ul">
                <li><a href="">服务</a></li>
            </ul>-->
        </div>
    </div>
    <!--头部-->

    <div class="home-full-banner">
        {% for hotGoods in shopHotGoods %}
        <a href="/shop/goods/{{hotGoods.goodsID}}" class="item"><img data-lazy="{{hotGoods.imgurl}}" alt="" /></a>
        {% endfor %}
    </div>

    <div class="gray-box">
        <div class="wrapper">
            <!-- 商品促销 -->
            <div class="section-hd">
                <div class="title">精美主题</div>
            </div>
            <div class="sg-list clearfix">
                {% for goods in shopGoods %}
                <div class="col col-3">
                    <div class="item">
                        <div class="inner">
                            <a href="/shop/goods/{{goods.goodsID}}"><img class="figure" src="{{goods.imgurl}}" alt="" /></a>
                            <a href="/shop/goods/{{goods.goodsID}}"><div class="name">{{goods.title}}</div><div class="price">{{goods.price}}元</div></a>
                            <a class="act" name="add_cart" href="javascript:void(0);"  data-goodsID="{{goods.goodsID}}" data-price="{{goods.price}}"><i class="iconfont icon-cart"></i>加入购物车</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

     <!--脚部-->
    <div class="fatfooter">
        <div class="wrapper">
            <div class="fatft-service">
                <div class="item">
                    <a href="">
                        <img src="/public/img/ico/ft-ser1.png" alt="" class="ico" />
                        <span>品质保障</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="/public/img/ico/ft-ser2.png" alt="" class="ico" />
                        <span>七天无理由退换货</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="/public/img/ico/ft-ser3.png" alt="" class="ico" />
                        <span>特色服务体验</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="/public/img/ico/ft-ser4.png" alt="" class="ico" />
                        <span>帮助中心</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="fatft-links">
            <div class="wrapper">
                <div class="col-link">
                    <div class="tit">购物指南</div>
                    <div class="link"><a href="">购物流程</a></div>
                    <div class="link"><a href="">账户安全</a></div>
                    <div class="link"><a href="">联系客服</a></div>
                    <div class="link"><a href="">会员介绍</a></div>
                </div>
                <div class="col-link">
                    <div class="tit">配送方式</div>
                    <div class="link"><a href="">配送服务查询上</a></div>
                    <div class="link"><a href="">门自提</a></div>
                    <div class="link"><a href="">物流费用标准</a></div>
                </div>
                <div class="col-link">
                    <div class="tit">支付方式</div>
                    <div class="link"><a href="">银联支付</a></div>
                    <div class="link"><a href="">支付宝支付</a></div>
                    <div class="link"><a href="">微信支付</a></div>
                </div>
                <div class="col-link">
                    <div class="tit">售后服务</div>
                    <div class="link"><a href="">售后政策</a></div>
                    <div class="link"><a href="">价格保护</a></div>
                    <div class="link"><a href="">退单说明</a></div>
                    <div class="link"><a href="">取消订单</a></div>
                </div>
                <div class="col-link">
                    <div class="tit">联系我们</div>
                    <div class="link"><a href="">商家入驻</a></div>
                    <div class="link"><a href="">营销服务</a></div>
                    <div class="link"><a href="">关于我们</a></div>
                    <div class="link"><a href="">广告服务</a></div>
                </div>
                <div class="col-contact">
                    <div class="phone">400-889-8188</div>
                    <div class="time">周一至周日 8:00-18:00 </div>
                    <div class="tool">
                        <a href="" class="kefu"><i class="iconfont icon-huifu"></i>在线客服</a>
                        <a class="ico weixin" href=""><img src="/public/img/ico/ft-weixin.png" alt="" /><img src="/public/uploads/ercode.jpg" class="ercode" /></a>

                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    $('a[name=add_cart]').on('click',function () {
        let dom=$(this);
        let goodsID=dom.attr('data-goodsID');
        let num=1;
        let price=dom.attr('data-price');
        InmyjsKit.request.post("/shop/cart",{goodsID,num,price},function (res) {
            if(res.success){
                $('#span_cartNum').html(parseInt($('#span_cartNum').html())+1);
                $.msgbox({
                    type: 'confirm',
                    title:' 提示',
                    content: '已加入购物车，赶快去结算吧!',
                    onClose: function(){
                        if(this.val()){
                            window.location.href="/shop/cart";
                        }
                    }
                });
            }
        });
    });
    $('.home-full-banner').slick({
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        dots: true,
        fade: true
    });

    +function () {
        let bigH=$('.side-category').height();
        $(window).on('scroll resize load',function () {
            let sTop=$(this).scrollTop(),
                valve=$('.home-full-banner').offset().top+$('.home-full-banner').height(),
                wH=$(this).height();

            //控制导航显示
            if (sTop>valve) {
                $('.side-category').show();
            }
            else {
                $('.side-category').hide();
            }
        })
    }();
    zAction.add({
        'category-toggle':function () {
            if ($(this).hasClass('on')) {
                $(this).removeClass('on').prev().slideDown(200);
            }
            else {
                $(this).addClass('on').prev().slideUp(200);
            }
        },

    });

</script>
{% endblock %}

